<template>
	<view>
		<view v-if="detail.shop_id" class="container">
			<view class="header">
				<view class="shop-logo"><image :src="detail.logo.file_path"></image></view>
				<view class="shop-name">
					<text>{{ detail.shop_name }}</text>
				</view>
				<view v-if="detail.summary" class="shop-summary dis-flex">
					<text>门店简介：{{ detail.summary }}</text>
				</view>
			</view>
			<view class="content">
				<view class="content-item dis-flex flex-y-center">
					<view class="content-item__icon dis-flex"><text class="iconfont icon-shijian"></text></view>
					<view class="content-item__text flex-box dis-flex">
						<text class="f-26">{{ detail.shop_hours }}</text>
					</view>
				</view>
				<view @tap="onOpenLocation" class="content-item dis-flex flex-y-center">
					<view class="content-item__icon dis-flex"><text class="iconfont icon-dingwei"></text></view>
					<view class="content-item__text flex-box dis-flex">
						<text class="f-26">{{ detail.region.province }}{{ detail.region.city }}{{ detail.region.region }}{{ detail.address }}</text>
					</view>
					<view class="content-item__arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
				</view>
				<view @tap="onMakePhoneCall" class="content-item dis-flex flex-y-center">
					<view class="content-item__icon dis-flex"><text class="iconfont icon-dianhua"></text></view>
					<view class="content-item__text flex-box dis-flex">
						<text class="f-26">{{ detail.phone }}</text>
					</view>
					<view class="content-item__arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			// 门店详情
			detail: {},
			jssdkReady: false
		};
	},
	onLoad(options) {
		// 获取门店详情
		this.getShopDetail(options.shop_id);
		// #ifdef H5
		if (Tools.isWechat()) {
			this.$wechat.initJssdk(() => {
				this.jssdkReady = true;
			});
		}
		// #endif
	},
	methods: {
		/**
		 * 获取门店详情
		 */
		getShopDetail(shop_id) {
			this.$get(this.$api.getShopDetail, { shop_id }, res => {
				this.detail = res.data.detail;
				
			});
		},
		/**
		 * 查看位置
		 */
		onOpenLocation() {
			// #ifdef H5
			if (Tools.isWechat() && this.jssdkReady) {
				this.openLocationInWechat();
			} else {
				this.openLocationInUni();
			}
			// #endif
			// #ifndef H5
			this.openLocationInUni();
			// #endif
		},
		openLocationInUni() {
			let detail = this.detail;
			uni.openLocation({
				name: detail.shop_name,
				address: detail.region.province + detail.region.city + detail.region.region + detail.address,
				longitude: Number(detail.longitude),
				latitude: Number(detail.latitude),
				scale: 15
			});
		},
		openLocationInWechat() {
			// #ifdef H5
			let detail = this.detail;
			this.$wechat.openLocation({
				name: detail.shop_name,
				address: detail.region.province + detail.region.city + detail.region.region + detail.address,
				longitude: Number(detail.longitude),
				latitude: Number(detail.latitude),
				scale: 15
			});
			// #endif
		},
		/**
		 * 拨打电话
		 */
		onMakePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: this.detail.phone
			});
		}
	}
};
</script>

<style>
page,
.container {
	background: #fff;
}

.container {
	padding: 0 30rpx;
}

.header {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f1f1f1;
}

.shop-logo,
.shop-name {
	text-align: center;
}

.shop-logo image {
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
	box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
}

.shop-name {
	margin-top: 16rpx;
	font-size: 32rpx;
}

.shop-summary {
	padding: 20rpx;
	margin-top: 30rpx;
	font-size: 26rpx;
	line-height: 1.6;
	background: #f9f9f9;
	border-radius: 6rpx;
}

.content {
	margin-top: 30rpx;
}

.content-item {
	padding: 12rpx 0;
}

.content-item__text {
	padding: 0 20rpx;
}
</style>
